import React from 'react';
import { observer, inject } from 'mobx-react';
import { getAntd, getEcCom, getLabel } from '../../util/convert';
const { WeaReqTop } = getEcCom();
import '../../style/main';
import MainLayout from '../layout/MainLayout';
import { controlAsyncLoad } from '../../util/asyncLoad';
import * as Util from '../../util/formUtil';
import * as GlobalUtil from "../../util/public/globalUtil";

@inject('globalStore', 'layoutStore')
@observer
export default class PreView extends React.Component {
    constructor() {
        super();
    }
    componentDidMount() {
        jQuery("body").attr("class", "bodyOverflowHidden");
        Util.bindResizeEvent();
        controlAsyncLoad();
        GlobalUtil.loadCaculateResource();
    }
    componentDidUpdate() {
        controlAsyncLoad();
    }
    render() {
        const { globalStore, layoutStore } = this.props;
        const { commonParam } = globalStore;
        const { layouttype } = commonParam;
        const { dataJson } = layoutStore;
        const hasLoad = !_.isEmpty(commonParam) && !_.isEmpty(dataJson);
        if (hasLoad)
            return layouttype === 1 || layouttype === 2 ? this.renderPrint() : this.renderShow();
        return null;
    }
    renderShow() {
        const { margin } = this.props.globalStore.commonParam;
        const tabDatas = [
            { title: getLabel(34130, "流程表单"), key: "form" }
        ];
        return (
            <div className="wf-req">
                <WeaReqTop ecId={`${this && this.props && this.props.ecId || ''}_WeaReqTop@7go64i`}
                    title={<div>{getLabel(31568,'模板预览')}</div>}
                    icon={<i className='icon-coms-workflow' />}
                    iconBgcolor='#0079DE'
                    tabDatas={tabDatas}
                    selectedKey="form"
                >
                    <div className="wf-req-form-content">
                        <div className="wf-req-form-scroll">
                            <div className="wf-req-form-main">
                                <div className='wf-req-form-wrapper' style={{ margin: margin }}>
                                    <div className='wf-req-form' style={{ margin: "0 auto", marginBottom: '20px' }}>
                                        <MainLayout ecId={`${this && this.props && this.props.ecId || ''}_MainLayout@ql61lr`} symbol="main" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div></div>
                </WeaReqTop>
            </div>
        )
    }
    renderPrint() {
        jQuery("body").css("overflow", "auto");
        return (
            <div className="wf-req-print" style={{margin:"10px 6px"}}>
                <div className='wf-req-form' style={{ margin: "0 auto", marginBottom: '20px' }}>
                    <MainLayout ecId={`${this && this.props && this.props.ecId || ''}_MainLayout@kc5s6f`} symbol="main" />
                </div>
            </div>
        )
    }
}